<template>
  <div class="mission-tally-container">
    <mt-header title="理货">
      <mt-button icon="back" slot="left"></mt-button>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <div class="tally__content">
      <div class="tally-sku-title-row">
        <div class="title__pic"><img src="" alt="pic" /></div>
        <div class="title__info">
          <p>{{ "耐克---男装" }}</p>
          <p>理货{{ 0 }}箱, {{ 0 }}款, {{ 0 }}件</p>
        </div>
        <div class="title__to-detail">
          <router-link to="/mission/detail">理货详情</router-link>
        </div>
      </div>
      <div class="sku-bin-row">
        <div class="bin-label">箱号:</div>
        <div class="bin-number">NK10086</div>
        <div class="bin-operation"><span>+</span> <span>印</span></div>
      </div>
      <div class="box-bin-list">
        <p class="no-bin-list" v-if="!binList.length">请先添加箱号，然后添加款式</p>
        <p class="bin-item" v-for="index in binList" :key="index">
          <bin-item :index="index"></bin-item>
        </p>
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="submit-btn" @click="submit">提交</div>

    <!-- 悬浮button -->
     <mt-button @click="addNew">
       +
     </mt-button>
  </div>
</template>
<script>
import "./mission-tally.scss";
import { MessageBox, Button } from "mint-ui";
import BinItem from "@/components/mission/bin-item";

export default {
  components: {
    BinItem,
    mtButton: Button
  },
  computed: {
    binList() {
      return [1, 2, 3, 4, 5];
    }
  },
  methods: {
    submit() {
      MessageBox({
        title: "提示",
        message: "您尚未创建箱号或款式",
        confirmButtonText: "知道了"
      });
    },
    addNew() {
      console.log("add new");
      this.$router.push({
        name: "AddNewPattern"
      });
    }
  }
};
</script>
